import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Table, Button, Input, Grid, Form, Select, Message } from '@alifd/next';
import { ApiOfJobSwitchRoute } from '#/utils/coreApiDefine'

export default class SwitchNode extends Component {
    static displayName = 'SwitchNode';
    static propTypes = {};
    static defaultProps = {};

    constructor(props) {
        super(props);
        let editInstance = this.props.editInstance;
        this.state = {
            jobRouter: editInstance,
        };
    }

    renderOper = (value, index, item) => {
        return (
            <div>
                <Button onClick={() => this.onSelectNewNode(item)} type="primary" text>选择</Button>
            </div>
        );
    }

    onSelectNewNode = item => {
        let that = this;
        ApiOfJobSwitchRoute(this.state.jobRouter.jobName, item.replace(/:/g, "@")).then(() => that.props.submitCallback('success'))
    }

    render() {
        return (
            <IceContainer style={styles.container}>
                <Table
                    dataSource={this.state.jobRouter.availableNodes}
                    hasBorder={false}
                    getRowProps={this.setRowProps}
                    style={{ padding: '0 20px 20px' }}
                >
                    <Table.Column width={150} title="可用节点" cell={(value, index, record) => record} />
                    <Table.Column
                        width={80}
                        title="操作"
                        cell={this.renderOper}
                    />
                </Table>
            </IceContainer>
        );
    }
}

const styles = {
    container: {
        margin: '20px',
        padding: '0 0 20px',
    },
    title: {
        margin: '0',
        padding: '15px 20px',
        fonSize: '16px',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        color: 'rgba(0,0,0,.85)',
        fontWeight: '500',
        borderBottom: '1px solid #eee',
    },
    link: {
        margin: '0 5px',
        color: 'rgba(49, 128, 253, 0.65)',
        cursor: 'pointer',
        textDecoration: 'none',
    },
    separator: {
        margin: '0 3px',
        display: 'inline-block',
        height: '12px',
        width: '1px',
        verticalAlign: 'middle',
        background: '#e8e8e8',
    },
    pagination: {
        textAlign: 'right',
        marginRight: '20px',
    },
    editIcon: {
        color: '#2874D1',
        cursor: 'pointer',
    },
    horizontal: {
        dl: {
            marginTop: '3px',
            marginBottom: '3px',
        },
        dt: {
            float: 'left',
            width: '80px',
            overflow: 'hidden',
            clear: 'left',
            textAlign: 'right',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
        },
        dd: {
            marginLeft: '100px',
        }
    },
    formItem: {
        display: 'flex',
        alignItems: 'center',
        margin: '10px 0',
    },
    formComponent: {
        minWidth: '300px',
    },
    formLabel: {
        minWidth: '70px',
    },
    willAdd: {
        background: '#dff0d8'
    },
    willRemove: {
        background: '#f2dede'
    },
};